<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>公众号详情</span>
                <el-link type="warning"
                         size="small"
                         href="https://mp.weixin.qq.com/cgi-bin/loginpage"
                         target="_blank">
                    微信后台登录
                </el-link>
                <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回</el-button>
            </div>
            <div>
                <el-form :inline="true" label-suffix="" label-width="100px"
                         size="small" label-position="left">
                    <el-row>
                        <el-col>
                            <el-form-item>
                                <el-button size="small" type="success" @click="createOpenAccount">
                                    创建开放平台账号
                                </el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small" type="success" @click="setDefaultIndustry">
                                    设置默认行业
                                </el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small" type="success" @click="setTemplateMessage">
                                    设置模版消息
                                </el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small" type="success" @click="setFields">
                                    设置字段
                                </el-button>
                            </el-form-item>
                            <el-form-item v-if="mpInfo.canDelete">
                                <el-button size="small" type="danger" @click="deleteMp">
                                    删除
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <el-descriptions title="" direction="vertical" :column="8" border size="small">
                <el-descriptions-item label="名称">
                    {{ mpInfo.name }}
                </el-descriptions-item>
                <el-descriptions-item label="功能介绍">
                    {{ mpInfo.signature }}
                </el-descriptions-item>
                <el-descriptions-item label="主体名称">
                    {{ mpInfo.principalName }}
                </el-descriptions-item>
                <el-descriptions-item label="公众号APP_ID">
                    {{ mpInfo.appId }}
                </el-descriptions-item>
                <el-descriptions-item label="开放平台APP_ID">
                    {{ mpInfo.openAppId }}
                </el-descriptions-item>
                <el-descriptions-item label="第三方平台APP_ID">
                    {{ mpInfo.componentAppId }}
                </el-descriptions-item>
                <el-descriptions-item label="头像">
                    <div>
                        <el-avatar :src="mpInfo.headImg"></el-avatar>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="二维码">
                    <div>
                        <el-button type="text" @click="showQrcode">点击查看</el-button>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="主营行业">
                    {{ mpDetail.primaryIndustry }}
                </el-descriptions-item>
                <el-descriptions-item label="副营行业">
                    {{ mpDetail.secondaryIndustry }}
                </el-descriptions-item>
                <el-descriptions-item label="上次设置行业时间">
                    {{ mpDetail.lastSetIndustryTime }}
                </el-descriptions-item>
                <el-descriptions-item label="关注总人数">
                    {{ mpDetail.subscribeTotal }}
                </el-descriptions-item>
                <el-descriptions-item label="是否开启ChatGPT">
                    {{ mpInfo.chatGptFlag ? '是' : '否' }}
                </el-descriptions-item>
                <el-descriptions-item label="ChatGPT关键词前缀">
                    {{ mpInfo.chatGptPrefix }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>

        <el-tabs v-model="activeName">
            <el-tab-pane label="关联小程序" name="mnp">
                <div>
                    <el-form ref="searchForm" :inline="true" label-suffix="" label-width="100px"
                             label-position="left" size="small">
                        <el-row>
                            <el-col>
                                <el-form-item>
                                    <el-button type="success" @click="linkMnp">新增关联</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div>
                    <el-table
                        id="mainTable"
                        :data="linkMnpList"
                        border
                        size="mini"
                        header-cell-class-name="tableHeaderStyle"
                        :row-class-name="tableRowClassName">
                        <el-table-column prop="nickname" label="名称"></el-table-column>
                        <el-table-column prop="appid" label="APP_ID"></el-table-column>
                        <el-table-column prop="source" label="来源"></el-table-column>
                        <el-table-column prop="selected" label="selected"></el-table-column>
                        <el-table-column prop="verifyStatus" label="认证状态"></el-table-column>
                        <el-table-column prop="payStatus" label="微信支付状态"></el-table-column>
                        <el-table-column prop="status" label="关联状态" :formatter="formatLinkStatus"></el-table-column>
                        <el-table-column prop="released" label="是否发布"></el-table-column>
                        <el-table-column
                            label="操作"
                            width="80px">
                            <template v-slot="scope">
                                <div>
                                    <el-button @click="onUnLinkMnp(scope.row)" type="text" size="small">解除</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="消息回复" name="message">
                <mp-message-reply :mp-id="id" size="small"></mp-message-reply>
            </el-tab-pane>
            <el-tab-pane label="素材管理" name="material">
                <mp-material :mp-id="id" size="small"></mp-material>
            </el-tab-pane>
            <el-tab-pane label="关注用户" name="subscribeUser">
                <mp-subscriber :mp-id="id" size="small"></mp-subscriber>
            </el-tab-pane>
            <el-tab-pane label="用户日志" name="log">
                <mp-log :mp-id="id" size="small"></mp-log>
            </el-tab-pane>
            <el-tab-pane label="模版消息" name="templateMessage">
                <mp-template-message :mp-id="id" size="small" ref="templateMessage"></mp-template-message>
            </el-tab-pane>
        </el-tabs>

        <el-dialog title="关联小程序" width="40%" :visible.sync="linkMnpDialogVisible">
            <el-form :model="linkMnpForm" label-width="120px" size="small">
                <el-form-item label="小程序APP_ID">
                    <el-input v-model="linkMnpForm.mnpAppId"
                              placeholder="请输入小程序APP_ID"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="linkMnpDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="linkMnpConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="设置字段" width="40%" :visible.sync="setFieldsDialogVisible">
            <el-form :model="setFieldsForm" label-width="150px" size="small">
                <el-form-item label="是否开启ChatGPT">
                    <el-switch v-model="setFieldsForm.chatGptFlag"></el-switch>
                </el-form-item>
                <el-form-item label="ChatGPT关键词前缀">
                    <el-input v-model="setFieldsForm.chatGptPrefix" placeholder="ChatGPT关键词前缀"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="setFieldsDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="setFieldsConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    createOpenAccountById,
    deleteMpInfo,
    getMpDetailByMpId,
    getMpInfoById,
    getMpLinkMnpList,
    linkMnp,
    setMpDefaultIndustry,
    setMpFields,
    setMpTemplateMessage,
    unLinkMnp,
} from '@/api/api'
import MpSubscriber from "@/component/MpSubscriber";
import MpLog from "@/component/MpLog";
import MpTemplateMessage from "@/component/MpTemplateMessage";
import MpMaterial from "@/component/MpMaterial";
import MpMessageReply from "@/component/MpMessageReply";

export default {
    name: "OfficialAccountDetail",
    components: {MpSubscriber, MpLog, MpTemplateMessage, MpMaterial, MpMessageReply},
    data() {
        return {
            // 分页搜索条件
            subscriberCondition: {
                page: 1,
                rows: 5,
                total: 0,
                search: {}
            },
            // 表格数据
            subscriberData: [],
            // 公众号信息
            mpInfo: {},
            // 公众号ID
            id: '',
            // 公众号详情
            mpDetail: {},
            // 关联的小程序
            linkMnpList: [],

            // 关联小程序对话框
            linkMnpDialogVisible: false,
            linkMnpForm: {},

            // 当前tab名称
            activeName: 'mnp',

            // 设置字段
            setFieldsDialogVisible: false,
            setFieldsForm: {},
        }
    },
    methods: {
        setFields: function () {
            this.setFieldsDialogVisible = true;
            // 深拷贝
            this.setFieldsForm = Object.assign({}, this.mpInfo);
        },
        setFieldsConfirm: function () {
            setMpFields(this.setFieldsForm).then(data => {
                if (data.respCode == 1000) {
                    this.setFieldsDialogVisible = false;
                    this.getData();
                }
            });
        },
        linkMnp() {
            this.linkMnpDialogVisible = true;
            this.linkMnpForm.mpId = this.id;
        },
        linkMnpConfirm() {
            linkMnp(this.linkMnpForm).then(data => {
                if (data.respCode == 1000) {
                    this.$message({
                        type: 'success',
                        message: '关联成功!'
                    });
                    this.linkMnpDialogVisible = false;
                    this.getLinkMnpList();
                }
            })
        },
        onUnLinkMnp: function (row) {
            this.$confirm('请确认是否解除关联，解除关联后可能导致部分跟该小程序相关的功能不可用, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                unLinkMnp({"mpId": this.id, "mnpAppId": row.appid}).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '解除关联成功，请在管理员微信中确认消息后才会正式解除关联!'
                        });
                        this.getLinkMnpList();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        setDefaultIndustry() {
            this.$confirm('该操作将会把公众号的主营行业设置为"餐饮/餐饮"，副营行业设置为"互联网|电子商务/IT科技", 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                setMpDefaultIndustry({"mpId": this.id}).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '设置成功!'
                        });
                        this.getMpDetail();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        setTemplateMessage() {
            this.$confirm('该操作会将系统预设模版消息同步至公众号里面, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                setMpTemplateMessage({"mpId": this.id}).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '设置成功!'
                        });
                        this.$refs.templateMessage.getData();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 删除公众号
        deleteMp() {
            this.$confirm('该操作高危，会清除跟该公众号相关的一切信息, 且不可恢复，请确认是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteMpInfo({id: this.id}).then(data => {
                    if (data.respCode == '1000') {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.goBack();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 显示二维码
        showQrcode() {
            window.open('javascript:window.name;', '<script>location.replace("' + this.mpInfo.qrcodeUrl + '")<\/script>');
        },
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        // 格式布尔值
        formatBoolean: function (row, column, cellValue) {
            if (cellValue) {
                return "是";
            } else {
                return "否";
            }
        },
        formatLinkStatus: function (row, column, cellValue) {
            if (cellValue == null) {
                return "";
            }
            if (cellValue == '1') {
                return "已关联";
            } else if (cellValue == '2') {
                return "等待小程序管理员确认中";
            } else if (cellValue == '3') {
                return "小程序管理员拒绝关联";
            } else if (cellValue == '12') {
                return "等待公众号管理员确认中";
            } else {
                return "未知";
            }
        },
        // 创建开放平台账户
        createOpenAccount: function () {
            this.$confirm('请确认是否创建开放平台账号, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                createOpenAccountById({"id": this.id}).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '创建成功!'
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 获取数据
        getData: function () {
            getMpInfoById({"id": this.id}).then(data => {
                this.mpInfo = data.body;
            });
            this.getMpDetail();
            this.getLinkMnpList();
        },
        getMpDetail() {
            getMpDetailByMpId({"mpId": this.id}).then(data => {
                this.mpDetail = data.body;
            })
        },
        getLinkMnpList() {
            getMpLinkMnpList({"mpId": this.id}).then(data => {
                if (data.respCode == 1000) {
                    this.linkMnpList = data.body.wxopens.items;
                }
            })
        },
        goBack() {
            // 编程式导航
            this.$router.go(-1);
        },
    },
    created() {
        this.id = this.$route.query.id;
        this.getData();
    }
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
